<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>一天零一页</title>
    <link rel="shortcut icon" type="image/x-icon" href="./static/images/icon.png" media="screen" />
    <link rel="stylesheet" href="./static/css/bootstrap.min.css">
    <script src="./static/js/jquery-3.2.1.min.js"></script>
    <script src="./static/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./static/css/bootstrap4.0.min.css" >
    <script src="./static/js/jquery.slim.min.js" ></script>
    <script src="./static/js/popper.min.js" ></script>
    <script src="./static/js/bootstrap4.0.min.js"></script>
    <script src="./static/js/layer.js"></script>
    <script src="./static/js/axios.min.js"></script>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		#bg:after {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,.4);
			z-index: 1;
		}/*给背景图片设置蒙版*/
		body {
			font: 14px/1.5 微软雅黑, arial, sans-serif;
			width: 100%;
			overflow: scroll;
		}
		#header {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 66px;
			color: #fff;
			z-index: 9999;
			transition: all .3s;
		}/*设置页眉*/
		#header nav {
			position: relative;
			width: 80%;
			margin: 0 auto;
		}
		ul {
			list-style: none;
		}/*去掉列表样式*/
		#header nav li {
			border: 0;
			display: inline-block;
			height: 66px;
			line-height: 66px;
			font-size: 16px;
			position: relative;
			cursor: pointer;
		}
		#header nav li a {
			display: inline-block;
			padding: 0 12px;
			white-space: nowrap;
			color: #fff;
		}
		a {
			text-decoration: none;
		}/*去掉链接下划线*/
		#bg {
			position: relative;
			background: url("./static/images/296494-106.jpg") no-repeat gray;
			background-size: cover;
		}/*设置背景图片*/
		#bg p {
			position: relative;
			padding: 95px 0 70px;
			color: hsla(0,0%,100%,.9);
			text-align: center;
			font-size: 26px;
			line-height: 2;
			z-index: 2;
			letter-spacing: 2.5px;
			text-shadow: 0 3px 25px rgba(0,0,0,.3);
			cursor: progress;
			padding-top: 210px;
			padding-right: 0px;
			padding-bottom: 210px;
			padding-left: 0px;
		}/*设置文字属性*/
		#bg p i {
			text-decoration: line-through;
			font-size: 20px;
			color: hsla(0,0%,100%,.8);
			text-shadow: 0 0 0 transparent;
			font-style: normal;
		}/*设置第二行文字属性*/
		#header nav figure
		{
			background:url("");
			height: 50px;
			width: 50px;
			background-size:cover ;

		}
		#header nav .my-info {
			position: absolute;
			top: 8px;
			right: 0;
		}
		figure {
			display: block;
			-webkit-margin-before: 1em;
			-webkit-margin-after: 1em;
			-webkit-margin-start: 40px;
			-webkit-margin-end: 40px;
			border-radius:100px;
		}

		#header nav span {
			font-size: 18px;
			margin: 0 10px;
		}
		#header nav figure, #header nav span {
			display: inline-block;

			vertical-align: middle;
		}

		#copyright {
			position: absolute;
			top: 0;
			left: 0;
			background: #ADD8E6;
			width: 100%;
			height: 100%;
			transform-origin: 100% 0;
			transition: all .5s;
			z-index: 2;
		}
		#copyright p {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			line-height: 2;
		}
		#footer {
			position: relative;
			height: 80px;
			border-top: 1px solid #eee;
			background:#ADD8E6;
			color: white;
			font-size: 12px;
			text-align: center;
			border-top: 2px dashed #ADD8E6;
			transition: height .1s 1s;
		}
		#hiddenewm p{
			color: #444;
		}
		#hiddenewm
		{
			background: #fff;
			text-align: center;
			position: absolute;
			left: 25px;
			top: 70px;
		}
		#container {
			position: relative;
			max-width: 95%;
			margin: 0 auto;
		}
		.article {
			box-shadow: 5px 5px 25px #dadada;
			position: relative;
			padding: 0 20px;
			margin: 40px auto;
			max-width: 950px;
			background: #fff;
			text-align: center;
		}
		.article>time {
			position: absolute;
			top: 0;
			left: 0;
			border-bottom: 1px solid #ccc;
			font-size: 14px;
			padding: 4px 5px 0;
			color: #999;
		}
		.article h2 {
			padding-bottom: .5em;
			font-size: 1.75em;
			line-height: 1.225;
		}
		.article>h2 {
			padding: 35px 0 45px;
			font-size: 22px;
			font-weight: 700;
			cursor: pointer;
		}
		#container a {
			color: #333;
		}
		.article>span {
			position: absolute;
			top: 0;
			right: 0;
			color: #999;
			padding: 3px 10px;
			background: #f1f1f1;
			font-size: 14px;
		}
		.article section {
			text-align: left;
			padding: 10px;
			font-size: 16px;
		}
		.article blockquote {
			padding: 0 15px;
			color: #777;
			border-left: 4px solid #ddd;
		}
		.article footer {
			padding: 25px 0 20px;
		}
		.article footer a {
			display: inline-block;
			color: #18bc9c;
			cursor: pointer;
			padding: 4px 20px;
			border-radius: 5px;
			transition: all .5s;
			border: 1px solid #18bc9c;
		}
		#pagebar{
			text-align: center;
		}
		.article-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .article {
            width: 32.333%; /* 确保三列占据同一行 */
            box-sizing: border-box;
            padding: 10px;
            background: #fff;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .article + .article {
            margin-left: 1%; /* 可选：添加列间距 */
        }
        /* 为每行的第三列移除右边距 */
        .article-row .article:nth-child(3n) {
            margin-right: 0;
        }
	</style>
</head>
<body background="./static/images/bg.png">
    <div>
        <header id="header">
            <nav>
                <ul>
                    <li>
                        <a href="/" style="color:#AB82FF">首页</a>
                        <a href="/about" style="color:#AB82FF">关于</a>
                    </li>
                </ul>
                <div class="my-info" onmouseover="hiddeewm()" onmouseout="hiddeewm()">
                    <figure>
                        <img src="./static/images/nopict.jpg" width="50px" height="50px"/>
                    </figure>
                    <span style="color:#AB82FF">一天零一页</span>
                </div>
            </nav>
        </header>
        <div id="bg">
            <p>
                和所有以梦为马的诗人一样
                <br />
                <i>岁月易逝 一滴不剩</i>
            </p>
        </div>
    </div>
    <div align="center">
        <a href="/jsp/admin/article/add">那就写点吧！</a>
    </div>
    
    <!-- 文章容器 -->
    <div id="article-container"></div>
    
    <!-- 分页容器 -->
    <div id="pagination-container"></div>
    
    <footer id="footer">
        <section id="copyright">
            <p style="font-size: 20px">
                © 2018 <a href="/">一天零一页</a>
            </p>
        </section>
    </footer>

    <!-- 自定义 JavaScript -->
    <script>
        // 初始化页面
        document.addEventListener("DOMContentLoaded", () => {
            loadArticles();
        });

        // 模拟数据
        const mockData = {
            articles: [
                {
                    id: 1,
                    localTime: "2024-10-10 10:00:00",
                    title: "第一篇文章标题",
                    keywords: "关键词1",
                    desci: "第一篇文章简介..."
                },
                {
                    id: 2,
                    localTime: "2024-10-11 10:00:00",
                    title: "第二篇文章标题",
                    keywords: "关键词2",
                    desci: "第二篇文章简介..."
                },
                {
                    id: 3,
                    localTime: "2024-10-12 10:00:00",
                    title: "第三篇文章标题",
                    keywords: "关键词3",
                    desci: "第三篇文章简介..."
                },
                {
                    id: 4,
                    localTime: "2024-10-13 10:00:00",
                    title: "第四篇文章标题",
                    keywords: "关键词4",
                    desci: "第四篇文章简介..."
                },
                {
                    id: 5,
                    localTime: "2024-10-14 10:00:00",
                    title: "第五篇文章标题",
                    keywords: "关键词5",
                    desci: "第五篇文章简介..."
                },
                {
                    id: 6,
                    localTime: "2024-10-15 10:00:00",
                    title: "第六篇文章标题",
                    keywords: "关键词6",
                    desci: "第六篇文章简介..."
                }
            ],
            pageInfo: {
                pageNum: 1,
                pages: 2,
                total: 6
            }
        };

        // 加载文章数据
        function loadArticles() {
            const data = mockData;
            displayArticles(data.articles, data.pageInfo);
        }

        // 显示文章列表和分页
        function displayArticles(articles, pageInfo) {
            const articleContainer = document.getElementById("article-container");
            articleContainer.innerHTML = "";
            
            let currentRow = document.createElement("div");
            currentRow.className = "article-row";
            
            let countInRow = 0;
            articles.forEach(article => {
                const articleElement = document.createElement("div");
                articleElement.className = "article";
                articleElement.innerHTML = `
                    <article>
                        <time>${article.localTime}</time>
                        <h2 class="title"><a href="article?id=${article.id}">${article.title}</a></h2>
                        <span><i>${article.keywords}</i></span>
                        <section class="article-content markdown-body">
                            <blockquote>
                                <p>${article.desci}</p>
                            </blockquote>
                        </section>
                        <footer>
                            <a href="article?id=${article.id}">阅读全文</a>
                            <a href="/jsp/admin/article/edit?id=${article.id}">修改</a>
                            <a href="#" onclick="deleteArticle('${article.id}')">删除</a>
                        </footer>
                    </article>
                `;
                
                currentRow.appendChild(articleElement);
                countInRow++;
                
                if (countInRow === 3) {
                    articleContainer.appendChild(currentRow);
                    currentRow = document.createElement("div");
                    currentRow.className = "article-row";
                    countInRow = 0;
                }
            });
            
            if (countInRow > 0) {
                articleContainer.appendChild(currentRow);
            }
            
            // 动态生成分页
            const paginationContainer = document.getElementById("pagination-container");
            paginationContainer.innerHTML = `
                <ul class="pagination" style="justify-content: center;">
                    <li class="${pageInfo.pageNum === 1 ? 'disabled' : ''}">
                        <a href="#" onclick="loadArticles(${pageInfo.pageNum - 1})">&laquo;</a>
                    </li>
                    ${generatePageNumbers(pageInfo)}
                    <li class="${pageInfo.pageNum === pageInfo.pages ? 'disabled' : ''}">
                        <a href="#" onclick="loadArticles(${pageInfo.pageNum + 1})">&raquo;</a>
                    </li>
                </ul>
            `;
        }

        // 生成页码按钮
        function generatePageNumbers(pageInfo) {
            let pageNumbers = '';
            for (let i = 1; i <= pageInfo.pages; i++) {
                pageNumbers += `
                    <li class="${pageInfo.pageNum === i ? 'active' : ''}">
                        <a href="#" onclick="loadArticles(${i})">${i}</a>
                    </li>
                `;
            }
            return pageNumbers;
        }

        // 删除文章
        function deleteArticle(id) {
            layer.confirm('确定删除该文章吗?', {
                btn: ['确定','取消'] 
            }, function(){
                layer.msg('删除成功!', {icon:1, time:1000});
                setTimeout(() => {
                    window.location.reload();
                }, 1000);
            });
        }
    </script>
</body>
</html>